import React from 'react';
import { inject, observer } from 'mobx-react';
import { Col, Spin, Row, Table } from 'antd';
import { WeaBrowser, WeaCheckbox, WeaFormItem, WeaInputNumber, WeaLeftRightLayout, WeaNewScroll, WeaOrgTree, WeaPopoverHrm, WeaRightMenu, WeaScope, WeaSearchGroup, WeaSelect } from 'ecCom';
import { toJS } from 'mobx';
import { idsAndNamesToArr, getCurrentHeight } from "../../../util/Util";

/**
 * 考核设置-基础设置
 * jiansong 2019/6/18
 */
@inject("baseSettingStore")
@observer
export default class BaseSetting extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            _height: getCurrentHeight(),
        };
        this.store = this.props.baseSettingStore;
    }

    componentWillMount() {
        this.store.settingData.resourcetype = '1'
        this.store.baseSettingApiData()
    }

    render() {
        const { menu } = this.props;
        const { settingData, canedit, title, loading, scoreOptions, onValueChange,showLog,changeShowLog,logStore } = this.store;
        const { _height } = this.state;
        const columns = [
            { title: '类型', dataIndex: 'cate', width: '20%', },
            { title: '开始时间', dataIndex: 'beginDate', width: '40%' },
            { title: '截止时间', dataIndex: 'endDate', width: '40%' }
        ];

        let tableDataList = [];
        if (settingData.isfyear == 1) {
            tableDataList.push(this.buildTableItem("年度", "fstarttype", settingData.fstarttype, "fstartdays", settingData.fstartdays, "fendtype", settingData.fendtype, "fenddays", settingData.fenddays))
        }
        if (settingData.ishyear == 1) {
            tableDataList.push(this.buildTableItem("半年", "hstarttype", settingData.hstarttype, "hstartdays", settingData.hstartdays, "hendtype", settingData.hendtype, "henddays", settingData.henddays))
        }
        if (settingData.isquarter == 1) {
            tableDataList.push(this.buildTableItem("季度", "qstarttype", settingData.qstarttype, "qstartdays", settingData.qstartdays, "qendtype", settingData.qendtype, "qenddays", settingData.qenddays))
        }
        if (settingData.ismonth == 1) {
            tableDataList.push(this.buildTableItem("月度", "mstarttype", settingData.mstarttype, "mstartdays", settingData.mstartdays, "mendtype", settingData.mendtype, "menddays", settingData.menddays))
        }
        return (
            <Spin spinning={loading}>
                <div className="wea-workrelate-performance-baseSetting" style={{ height: "calc(100vh - 120px)" }}>
                    <WeaLeftRightLayout
                        leftCom={
                            <WeaNewScroll height={_height - 120}>
                                <WeaOrgTree
                                    treeNodeClick={(val) => {
                                        this.onSearchSourceChange(val.node.props.id, Number(val.node.props.type) + 1, val.node.props.name)
                                    }}
                                    isLoadSubDepartment={true} />
                            </WeaNewScroll>
                        }
                        leftWidth={180}>
                        <WeaNewScroll height={_height - 120}>
                            {String(settingData.resourcetype) === "1" ?
                                <div style={{ margin: "40px" }}>请点击左侧相应的分部查看或设置对应绩效考核基础项！</div>
                                :
                                <WeaRightMenu datas={menu} showUrlItem={false}>
                                    <WeaPopoverHrm />
                                    <WeaSearchGroup title={title} showGroup={true}>
                                        {Number(settingData.resourcetype) === 2 &&
                                            (
                                                <div>
                                                    <WeaFormItem
                                                        label="启用考核周期"
                                                        labelCol={{ span: 3 }}
                                                        wrapperCol={{ span: 20 }}>
                                                        <WeaCheckbox
                                                            value={settingData.isfyear}
                                                            viewAttr={canedit ? 2 : 1}
                                                            display={"switch"}
                                                            style={{ display: 'inline-block', marginLeft: "10px" }}
                                                            onChange={(val) => onValueChange({ "isfyear": val })}
                                                        />年度
                                                        <WeaCheckbox
                                                            viewAttr={canedit ? 2 : 1}
                                                            display={"switch"}
                                                            value={settingData.ishyear}
                                                            style={{ display: 'inline-block', marginLeft: "10px" }}
                                                            onChange={(val) => onValueChange({ "ishyear": val })}
                                                        />半年
                                                        <WeaCheckbox
                                                            viewAttr={canedit ? 2 : 1}
                                                            display={"switch"}
                                                            value={settingData.isquarter}
                                                            style={{ display: 'inline-block', marginLeft: "10px" }}
                                                            onChange={(val) => onValueChange({ "isquarter": val })}
                                                        />季度
                                                        <WeaCheckbox
                                                            viewAttr={canedit ? 2 : 1}
                                                            display={"switch"}
                                                            value={settingData.ismonth}
                                                            style={{ display: 'inline-block', marginLeft: "10px" }}
                                                            onChange={(val) => onValueChange({ "ismonth": val })}
                                                        />月度
                                                    </WeaFormItem>
                                                    <WeaFormItem wrapperCol={{ span: 24 }}>
                                                        <Table
                                                            columns={columns}
                                                            bordered={true}
                                                            dataSource={tableDataList}
                                                            pagination={false} />
                                                    </WeaFormItem>
                                                </div>
                                            )}
                                        <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                            <Col span={3}>考核方案制定人</Col>
                                            <Col span={8}>
                                                <WeaBrowser
                                                    type={17}
                                                    isSingle={false}
                                                    title={"人力资源"}
                                                    viewAttr={canedit ? 2 : 1}
                                                    replaceDatas={toJS(settingData.programcreateData)}
                                                    onChange={(ids, names) => this.onSearchHrmChange(ids, names, "programcreate", "programcreateData")}
                                                />
                                            </Col>
                                            <Col span={3} offset={1}>考核方案审批人</Col>
                                            <Col span={5}>
                                                <WeaBrowser
                                                    type={17}
                                                    isSingle={false}
                                                    className={'manager-span'}
                                                    viewAttr={canedit ? 2 : 1}
                                                    replaceDatas={toJS(settingData.programauditData)}
                                                    onChange={(ids, names) => this.onSearchHrmChange(ids, names, "programaudit", "programauditData")}
                                                />
                                            </Col>
                                            <Col span={4}>
                                                <div style={{ display: 'inline-block', marginLeft: '20px' }}>
                                                    <WeaCheckbox
                                                        value={settingData.manageraudit}
                                                        className='manager-check-box'
                                                        viewAttr={canedit ? 2 : 1}
                                                        content='直接上级审批'
                                                        onChange={(val) => onValueChange({ "manageraudit": val })}
                                                    />
                                                </div>
                                            </Col>
                                        </Row>
                                        <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                            <Col span={3}>考核成绩确认人</Col>
                                            <Col span={8}>
                                                <WeaBrowser
                                                    type={17}
                                                    isSingle={false}
                                                    viewAttr={canedit ? 2 : 1}
                                                    replaceDatas={toJS(settingData.accessconfirmData)}
                                                    onChange={(ids, names) => this.onSearchHrmChange(ids, names, "accessconfirm", "accessconfirmData")}
                                                />
                                            </Col>
                                            <Col span={3} offset={1}>考核成绩查看人</Col>
                                            <Col span={8}>
                                                <WeaBrowser
                                                    type={17}
                                                    isSingle={false}
                                                    viewAttr={canedit ? 2 : 1}
                                                    replaceDatas={toJS(settingData.accessviewData)}
                                                    onChange={(ids, names) => this.onSearchHrmChange(ids, names, "accessview", "accessviewData")}
                                                />
                                            </Col>
                                        </Row>
                                        <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                            <Col span={3}>个人定义方案</Col>
                                            <Col span={8}>
                                                <WeaCheckbox
                                                    viewAttr={canedit ? 2 : 1}
                                                    display={"switch"}
                                                    value={settingData.isself}
                                                    style={{ display: 'inline-block' }}
                                                    onChange={(val) => onValueChange({ "isself": val })}
                                                />
                                            </Col>
                                            <Col span={3} offset={1}>上级定义方案</Col>
                                            <Col span={8}>
                                                <WeaCheckbox
                                                    viewAttr={canedit ? 2 : 1}
                                                    display={"switch"}
                                                    value={settingData.ismanager}
                                                    style={{ display: 'inline-block' }}
                                                    onChange={(val) => onValueChange({ "ismanager": val })}
                                                />
                                            </Col>
                                        </Row>
                                        <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                            <Col span={3}>评分范围</Col>
                                            <Col span={8}>
                                                <WeaScope
                                                    isMobx
                                                    value={[settingData.scoremin, settingData.scoremax]}
                                                    min={[-settingData.scoreSetting, settingData.scoreSetting]}
                                                    max={[-settingData.scoreSetting, settingData.scoreSetting]}
                                                    step={1}
                                                    viewAttr={canedit ? 2 : 1}
                                                    onChange={(val) => onValueChange({ "scoremin": val[0], "scoremax": val[1] })}
                                                />
                                            </Col>
                                            <Col span={3} offset={1}>修正分范围</Col>
                                            <Col span={8}>
                                                <WeaScope
                                                    isMobx
                                                    value={[settingData.revisemin, settingData.revisemax]}
                                                    min={[settingData.scoremin, settingData.scoremax]}
                                                    max={[settingData.scoremin, settingData.scoremax]}
                                                    step={1}
                                                    viewAttr={canedit ? 2 : 1}
                                                    onChange={(val) => onValueChange({ "revisemin": val[0], "revisemax": val[1] })}
                                                />
                                            </Col>
                                        </Row>
                                        <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                            <Col span={3}>附件上传目录</Col>
                                            <Col span={8}>
                                                <WeaBrowser
                                                    type={"doccategory"}
                                                    viewAttr={canedit ? 2 : 1}
                                                    replaceDatas={[{ id: settingData.docsecid, name: settingData.docpath }]}
                                                    onChange={(val, path) => onValueChange({ "docsecid": val, "docpath": path })}
                                                />
                                            </Col>
                                            <Col span={3} offset={1}>分制</Col>
                                            <Col span={8}>
                                                <WeaSelect
                                                    options={scoreOptions}
                                                    viewAttr={canedit ? 2 : 1}
                                                    value={String(settingData.scoreSetting)}
                                                    onChange={(val) => {
                                                        //更改评分范围
                                                        onValueChange({ "scoremin": -Number(val) })
                                                        onValueChange({ "scoremax": Number(val) })
                                                        onValueChange({ "scoreSetting": val })
                                                    }}
                                                />
                                            </Col>
                                        </Row>
                                        {
                                            canedit && <Row gutter="2" style={{ margin: '5px 10px 0 10px', lineHeight: '30px' }}>
                                                <Col span={3}>应用到其他{String(settingData.resourcetype) === "2" ? "分部" : "部门"}</Col>
                                                <Col span={8}>
                                                    {String(settingData.resourcetype) === "2" ?
                                                        <WeaBrowser
                                                            type={194}
                                                            title={"分部"}
                                                            value={settingData.subcompanyids}
                                                            onChange={(val) => onValueChange({ "subcompanyids": val })}
                                                            isSingle={false} />
                                                        :
                                                        <WeaBrowser
                                                            type={57}
                                                            title={"部门"}
                                                            value={settingData.departmentids}
                                                            onChange={(val) => onValueChange({ "departmentids": val })}
                                                            isSingle={false} />
                                                    }
                                                </Col>
                                            </Row>
                                        }
                                    </WeaSearchGroup>
                                </WeaRightMenu>
                            }
                        </WeaNewScroll>
                    </WeaLeftRightLayout>
                </div>
            </Spin>
        )
    }

    onSearchHrmChange(ids, names, type, typeData) {
        this.store.settingData[type] = ids;
        this.store.settingData[typeData] = idsAndNamesToArr(ids, names);
    }

    onSearchSourceChange(id, type, name) {
        this.store.settingData.resourceid = id;
        this.store.settingData.resourcetype = type;
        this.store.baseSettingApiData();
        this.store.title = name + "绩效考核基础设置";
    }

    //构建表格项
    buildTableItem(name, startType, startTypeValue, startDay, startDayValue, endType, endTypeValue, endDay, endDayValue) {
        const { canedit, timeType, onValueChange } = this.store;
        return {
            "cate": name,
            "beginDate":
                canedit ?
                    <span>结束
                        <WeaSelect
                            options={timeType}
                            value={String(startTypeValue)}
                            className={'tag-select'}
                            onChange={(val) => onValueChange({ [startType]: val })} />
                        <WeaInputNumber
                            value={startDayValue}
                            className={'tag-input'}
                            onChange={(val) => onValueChange({ [startDay]: val })} />天
                    </span>
                    :
                    <span>
                        结束{String(startTypeValue) === "-1" ? "前" : "后"}{startDayValue}天
                    </span>,
            "endDate":
                canedit ?
                    <span>结束
                        <WeaSelect
                            options={timeType}
                            value={String(endTypeValue)}
                            className={'tag-select'}
                            onChange={(val) => onValueChange({ [endType]: val })} />
                        <WeaInputNumber
                            value={endDayValue}
                            className={'tag-input'}
                            onChange={(val) => onValueChange({ [endDay]: val })} />天
                    </span>
                    :
                    <span>
                        结束{String(endTypeValue) === "-1" ? "前" : "后"}{endDayValue}天
                    </span>
        }
    }

};